
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="../../assets/css/idangerous.swiper.css" /> -->
<link rel="stylesheet" href="../../assets/css/swiper3.06.min.css" />
<script src="../../assets/js/jquery.min.js"></script>
<!-- <script src="../../assets/js/idangerous.swiper.min.js"></script> -->
<script src="../../assets/js/swiper3.06.min.js"></script>
<script src="../../assets/js/jquery.maskedinput.min.js"></script>
<style>
/* Demo Styles */
html {
	height: 100%;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	position: relative;
	height: 100%;
}

.swiper-container {
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
}

.red-slide {
	background: #ca4040;
}

.blue-slide {
	background: #4390ee;
}

.orange-slide {
	background: #ff8604;
}

.green-slide {
	background: #49a430;
}

.pink-slide {
	background: #973e76;
}

.swiper-slide .title {
	font-style: italic;
	font-size: 42px;
	margin-top: 80px;
	margin-bottom: 0;
	line-height: 45px;
}

.pagination {
	position: absolute;
	z-index: 20;
	left: 10px;
	bottom: 10px;
}

.swiper-pagination-switch {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: #222;
	margin-right: 5px;
	opacity: 0.8;
	border: 1px solid #fff;
	cursor: pointer;
}

.swiper-visible-switch {
	background: #aaa;
}

.swiper-active-switch {
	background: #fff;
}
</style>

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>
		Quiz <small> <i class="ace-icon fa fa-angle-double-right"></i>
			enhance your memory
		</small>
	</h1>
</div>
<!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<div class="swiper-container">
			<div class="swiper-wrapper" id="contentDiv">
				<div class="swiper-slide red-slide">
					<div class="title">Slide 1</div>
					aaaaaaaaaaa
				</div>
				<div class="swiper-slide blue-slide">
					<div class="title">Slide 2</div>
				</div>
				<div class="swiper-slide orange-slide">
					<div class="title">Slide 3</div>
				</div>
				<div class="swiper-slide green-slide">
					<div class="title">Slide 4</div>
				</div>
				<div class="swiper-slide pink-slide">
					<div class="title">Slide 5</div>
				</div>
				<div class="swiper-slide red-slide">
					<div class="title">Slide 6</div>
				</div>
				<div class="swiper-slide blue-slide">
					<div class="title">Slide 7</div>
				</div>
				<div class="swiper-slide orange-slide">
					<div class="title">Slide 8</div>
				</div>
			</div>
			<div class="pagination"></div>
		</div>
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->

<!-- page specific plugin scripts -->

<!--[if lte IE 8]>
  <script src="../../assets/js/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript">
	var mySwiper;
	window.onload = function() {
		var totalSize = 0;
		var ajaxQuizData = null;
		var qid = GetArgsFromHref(window.location.href, "qid");
		var destUrl = "";
		if(qid == "") {
			destUrl = "../../getWordListForQuiz";
		} else {
			destUrl = "../../getWordListForQuiz2?id=" + qid;
		}
		
		$.ajax({
			type : "POST",
			url : destUrl,
			async : false,
			dataType : "json",
			success : function(data) {
				var contentsInfo = "";
				ajaxQuizData = data;
				totalSize = data.length;
				for(var i = 0; i < data.length; i++) {
					var oneWordHtml = "";
					oneWordHtml += "<div class='swiper-slide  red-slide'  id='quizSpan" + i  + "'><div class='title'><p>";
					oneWordHtml += "     <b>" + (i + 1) + "/" + totalSize + "</b>." + data[i].sentence;
					oneWordHtml += "     </p>";
					oneWordHtml += "     <p>";
					oneWordHtml += "     " + data[i].explain2;
					oneWordHtml += "     </p>";
					oneWordHtml += "     <span style='display:none;' id='answerSpan" + i  + "'>" + data[i].answer + "</span>";
					oneWordHtml += "     <span style='display:none;' id='resultSpan" + i  + "'><img src='../../assets/images/icon_bad.gif' /></span>";
					oneWordHtml += "     <span style='display:none;' id='wordIdSpan" + i + "'>" + data[i].wordId  + "</span>";
					oneWordHtml += "     </div>";
					oneWordHtml += "     </div>";
					contentsInfo += oneWordHtml;
					//	In b<input id="input1" type="input" />
				}
				
				contentsInfo += ("<div id='resultDiv'>"
						+ "</div>");
				
				$("#contentDiv").html(contentsInfo);
				
				$.mask.definitions['~']='[-A-Za-z0-9]';
				for(var i = 0; i < data.length; i++) {
					$('#input' + i).attr('size', data[i].blankCount);
					var blankChars = "";
					for(var j = 0; j < data[i].blankCount; j++) {
						blankChars += '~';
					}
					$('#input' + i).mask(blankChars);
					//	In b<input id="input1" type="input" />
				}
				
				 $('#input0').focus();
			}

		});
		
		mySwiper = new Swiper('.swiper-container', {
			pagination : '.pagination',
			paginationClickable : true,
			onSlideChangeEnd: function(swiper){
				console.log("swiper.activeIndex:" + swiper.activeIndex);
				$('#input' + (swiper.activeIndex)).focus();
		    }
		})
	};
	
	function checkAnswer(inputIndex, blankCount) {
		var inputLength = $("#input" + inputIndex).val().replace(/\_/g, "").length; 
		if(inputLength == blankCount) {
			if($("#answerSpan" + inputIndex).html().toUpperCase() == $("#input" + inputIndex).val().toUpperCase()) {
				//console.log("right for" + inputIndex);
				$("#resultSpan" + inputIndex).html("<img src='../../assets/images/icon_good.gif' />");
				console.log("mySwiper.activeIndex:" + mySwiper.activeIndex);
				mySwiper.slideTo(mySwiper.activeIndex + 1, 1000, true);
				
			} else {
				//console.log("wrong for" + inputIndex);
				$("#resultSpan" + inputIndex).html("<img src='../../assets/images/icon_bad.gif' />");
			}
			$("#resultSpan" + inputIndex).show();
			
		}
	}
	
	function GetArgsFromHref(sHref, sArgName)
	{
	      var args    = sHref.split("?");
	      var retval = "";
	    
	      if(args[0] == sHref) /*参数为空*/
	      {
	           return retval; /*无需做任何处理*/
	      }  
	      var str = args[1];
	      args = str.split("&");
	      for(var i = 0; i < args.length; i ++)
	      {
	          str = args[i];
	          var arg = str.split("=");
	          if(arg.length <= 1) continue;
	          if(arg[0] == sArgName) retval = arg[1]; 
	      }
	      return retval;
	}

	 
</script>

